<template>
  <div>
    <a-modal width="600px" title="设置" :visible="visible" @ok="handleSubmit" @cancel="handleCancel">
      <section>
        <a-form :form="form" ref="formTemp">
          <a-form-item label="更新时间" v-bind="formItemLayout">
            <a-input-number
              :min="0"
              :max="7"
              v-model="upgradeTimes.day"
              @change="handlerTime('day')"
            />
            <span>&nbsp;/日</span>
            <a-input-number
              :min="0"
              :max="23"
              v-model="upgradeTimes.hour"
              @change="handlerTime('hour')"
            />
            <span>&nbsp; /时</span>
            <a-input-number
              :min="minMin"
              :max="59"
              v-model="upgradeTimes.min"
              @change="handlerTime('min')"
            />
            <span>&nbsp; /分</span>
          </a-form-item>
          <a-form-item label="驱动升级方式" v-bind="formItemLayout">
            <a-select v-decorator="['method']" placeholder="请选择驱动升级方式">
              <a-select-option
                v-for="(columns, i) in selectColumns.method"
                :key="i"
                :value="columns.value"
              >{{ columns.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </section>
    </a-modal>
  </div>
</template>
/* 设置驱动策略 */
<script lang="ts">
import { Component, Emit, Vue } from "vue-property-decorator";
import { selectColumns } from "@/common/AntSelectConfig";
import { strategy_set } from "@/api/strategy";
import { CloneDeep, DayHourMinToTimes } from "@/utils";
import { IStrategy } from "@/model/Strategy";
import formItemLayout from "@/common/FormItemLayout";

@Component({ name: "StrategyModal" })
export default class StrategyModal extends Vue {
  private selectColumns: any = selectColumns;
  private visible: boolean = false;
  private form: any = {};
  private formItemLayout: any = formItemLayout;
  private minMin: number = 0;

  private upgradeTimes: any = {
    day: 0,
    hour: 0,
    min: 10
  };

  created() {
    this.form = this.$form.createForm(this);
  }

  handlerTime(key: string) {
    this.upgradeTimes = this.fmtDayHourMin(this.upgradeTimes, key);
  }

  fmtDayHourMin(upgrades: any, key: string) {
    const maxDay = 7;
    const cache = CloneDeep(upgrades);
    const { day, hour, min } = upgrades;
    if (!day) cache.day = 0;
    if (!hour) cache.hour = 0;
    if (!min) cache.min = 0;
    try {
      if (day === maxDay && (hour != 0 || min != 0)) {
        if (["hour", "min"].includes(key)) {
          cache.day = 0;
        } else {
          cache.hour = 0;
          cache.min = 0;
        }
      }
      this.minMin = day === 0 && hour === 0 ? 10 : 0;
      return cache;
    } catch (error) {
      return cache;
    }
  }

  handleCancel() {
    this.visible = false;
  }

  handleSubmit() {
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        const { day, hour, min } = this.upgradeTimes;
        const timeInterval = DayHourMinToTimes(day, hour, min);
        const result: any = { ...values, timeInterval };
        this.submit(result);
      }
    });
  }

  @Emit("submit")
  async submit(form: IStrategy) {
    try {
      await strategy_set(form);
      this.handleCancel();
      this.$message.success("操作成功");
      return true;
    } catch (error) {
      return false;
    }
  }

  showModal(values: any): void {
    const { method, time } = CloneDeep(values);
    this.upgradeTimes = time;
    setTimeout(() => {
      this.form.setFieldsValue({ method });
    }, 0);
    this.visible = true;
  }
}
</script>
